<script setup lang="ts">
import { ContentWrapNoHeaderLine } from '@/components/ContentWrap'
import { Table } from '@/components/Table'
import {
  ElForm,
  ElFormItem,
  ElSelect,
  ElOption,
  ElInput,
  ElButton,
  ElSpace,
  ElDivider,
  ElDropdown,
  ElDropdownMenu,
  ElDropdownItem,
  ElCheckbox, ElDatePicker
} from 'element-plus'
import { reactive, ref, h, watch } from 'vue'
import { useTable } from "@/hooks/web/useTable";
import { LogData } from "@/api/auth/log/types";
import { getLogListApi, getLogParamListApi } from "@/api/auth/log/index";
import { Pagination, TableColumn } from "@/types/table";

const queryModel = reactive<Recordable>({
  column: '',
  val: '',
  start: '',
  end: '',
  operate: ''
})

const columns = reactive<TableColumn[]>([
  {
    field: 'createTime',
    label: '操作时间',
    search: false,
    visible: true,
    className: ''
  }, {
    field: 'name',
    label: '操作人',
    search: true,
    visible: true,
    className: ''
  }, {
    field: 'operate',
    label: '执行操作',
    visible: true,
    className: ''
  }, {
    field: 'url',
    label: '请求路径',
    visible: true,
    search: true,
    className: ''
  }, {
    field: 'params',
    label: '请求参数',
    visible: true,
    search: true,
    className: ''
  }
])

const { register, tableObject, methods } = useTable<LogData>({
  getListApi: getLogListApi,
  response: {
    list: 'list',
    total: 'total'
  }
})
const paginationObj = ref<Pagination>()
watch(() => tableObject.total,
  (val) => {
    if (val > 0) {
      paginationObj.value = {
        total: tableObject.total
      }
    } else {
      paginationObj.value = undefined
    }
  })
const { getList, setSearchParams } = methods
getList()

const spacer = h(ElDivider, { direction: 'vertical' })

const handleQuery = () => {
  let queryParams: Recordable = {} as any
  if (queryModel.column) {
    queryParams[queryModel.column] = queryModel.val
  }
  setSearchParams({ queryParams })
}

const handleVisibleChange = (item) => {
  item.className = item.visible ? '' : 'hidden'
}



const rangeDate = ref([])
const handleRangeDateChange = (dataArr) => {
  if (dataArr.length > 0) {
    queryModel.start = dataArr[0].getTime();
    queryModel.end = dataArr[1].getTime();
  } else {
    queryModel.start = '';
    queryModel.end = '';
  }
}
const param = ref([]);
getLogParamListApi().then(res => {
  param.value = res.data;
})
</script>
<template>
  <ContentWrapNoHeaderLine title="管理端操作日志">
    <div class="flex justify-between">
      <el-form :inline="true" ref="queryFormRef" :model="queryModel">
        <el-form-item>
          <el-space direction="horizontal" :size="0">
            <el-date-picker v-model="rangeDate" type="daterange" range-separator="→" start-placeholder="开始时间"
              end-placeholder="结束时间" @change="handleRangeDateChange" />

            <el-select v-model="queryModel.operate" placeholder="请选择查询字段">
              <el-option v-for="(p, index) in param" :label="p" :value="p" :key="index" />
            </el-select>
            <el-select v-model="queryModel.column" placeholder="请选择查询内容">
              <template v-for="col in columns">
                <el-option v-if="col.search" :label="`按${col.label}`" :key="col.field" :value="`${col.field}`" />
              </template>
            </el-select>
            <el-input v-model="queryModel.val" placeholder="请输入">
              <template #append>
                <el-button class="query-button" type="primary" @click="handleQuery">查询</el-button>
              </template>
            </el-input>
          </el-space>
        </el-form-item>
      </el-form>
    </div>
    <div class="rounded bg-gray-100 w-full flex justify-between px-1.5 py-2 mb-3.5">
      <el-space :size="10" :spacer="spacer">&nbsp;
      </el-space>
      <el-space :size="10">
        <el-dropdown trigger="click" :hide-on-click="false">
          <span class="el-dropdown-link">
            <Icon icon="icon-park-outline:config" class="cursor-pointer " />
          </span>
          <template #dropdown>
            <div class="flex flex-col p-2">
              <template v-for="column in columns">
                <el-checkbox v-if="column.field !== 'action'" v-model="column.visible" :label="column.label"
                  :key="column.field" size="small" @change="handleVisibleChange(column)" />
              </template>
            </div>
          </template>
        </el-dropdown>
        <el-dropdown trigger="click">
          <span class="el-dropdown-link">
            <Icon icon="bi:download" class="cursor-pointer " />
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item>导出到Csv</el-dropdown-item>
              <el-dropdown-item>导出到Excle</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
        <Icon icon="bi:printer" class="cursor-pointer " />
      </el-space>
    </div>
    <div class="">
      <Table border :selection="false" v-model:pageSize="tableObject.page_size"
        v-model:currentPage="tableObject.page_index" :columns="columns" :data="tableObject.tableList"
        :loading="tableObject.loading" :pagination="paginationObj" @register="register" />
    </div>
  </ContentWrapNoHeaderLine>
</template>
